<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <font-awesome-icon :icon="['fas', 'chevron-left']" onclick="history.go(-1)" />
            <p>选择体检套餐</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <ul class="setmeal">
            <li v-for="(item, index) in setmeals" :key="index">
                <div class="item">
                    <div class="item-left" @click="selectDate(item.smId)">
                        <h3>{{ item.name }}</h3>
                        <p>{{ item.price }}</p>
                    </div>
                    <div class="item-right" @click="toggleDetails(index)">
                        <p>详情</p>
                        <font-awesome-icon icon="angle-up" v-show="!item.show" />
                        <font-awesome-icon icon="angle-down" v-show="item.show"/>
                    </div>
                </div>
                <div class="item-content" v-show="item.show">
                    <table>
                        <tr>
                            <th>检查项目</th>
                            <th>检查内容</th>
                            <th>检查意义</th>
                            <th>检查要求</th>
                        </tr>
                        <tr v-for="(detail, detailIndex) in item.checkItemList" :key="detailIndex">
                            <td>{{ detail.ciName }}</td>
                            <td>{{ detail.ciContent }}</td>
                            <td>{{ detail.meaning }}</td>
                            <td>{{ detail.remarks }}</td>
                        </tr>
                    </table>
                </div>
            </li>
        </ul>

        <div class="bottom-ban"></div>
        <Footer></Footer>
    </div>
</template>

<script setup>
import Footer from '@/components/Footer.vue';
import { ref, onMounted,reactive } from 'vue'
import '../assets/js/setmeal.js';
import { useRouter,useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import axios from "../plugin/axiosInstance";

const setmeals = reactive([]);
const hpId=ref(null);

function goBack() {
    history.go(-1);
}

function selectDate(smId) {
    console.log("smid=="+smId);
    console.log("hpId=="+hpId.value);
    router.push({path:'/selectDate',query: {smId: smId,hpId: hpId.value}})
}

function toggleDetails(index) {
    setmeals[index].show = !setmeals[index].show;
}

function navigateTo(page) {
    location.href = page;
}

onMounted(() => {
    // 确保 js 文件中的代码在组件挂载时执行
    window.onload();
});

const init = () => {
    getHospitals();
    hpId.value=route.query.hpId;
}

const getHospitals = () => {
    axios.get('/setmeal/getAll').then(res => {
        if (res.data.code == 200) {
            console.log("code==200");
            setmeals.splice(0, setmeals.length, ...res.data.data);
        } else {
            alert("code!=200 发生了错误！")
        }
    });
}
init();
</script>

<style scoped>
@import "../assets/css/setmeal.css";
</style>
